<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动类型管理 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/activity-type-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">业务管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">邀约活动</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">活动类型管理</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">客户管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="customer-list.html" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户档案</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-user-plus"></i>
                            <span>新增客户</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>标签管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">业务管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="invitation-management.html" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>线路产品</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">活动类型管理</h1>
                <p class="page-subtitle">管理和配置各种邀约活动类型，提升活动创建效率</p>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" onclick="goBackToActivityList()">
                    <i class="fas fa-arrow-left"></i>
                    返回活动列表
                </button>
                <button class="btn btn-primary" id="add-activity-type-btn">
                    <i class="fas fa-plus"></i>
                    新增类型
                </button>
            </div>
        </header>

        <!-- 系统预设类型 -->
        <section class="preset-types-section">
            <div class="section-header">
                <h2 class="section-title">系统预设活动类型</h2>
                <p class="section-subtitle">系统内置的标准活动类型，不可删除但可以编辑配置</p>
            </div>

            <div class="preset-types-grid">
                <!-- 线下活动类型 -->
                <div class="type-category">
                    <h3 class="category-title">
                        <i class="fas fa-building"></i>
                        线下活动类型
                    </h3>
                    <div class="type-cards">
                        <div class="type-card preset" data-type-id="preset-1">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-presentation"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">产品推介会</h4>
                                <p class="type-description">新线路产品发布和介绍</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">120分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">50-100人</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">25%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-1')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>

                        <div class="type-card preset" data-type-id="preset-2">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-map-marked-alt"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">目的地分享会</h4>
                                <p class="type-description">特定目的地的深度介绍</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">90分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">30-60人</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">30%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-2')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>

                        <div class="type-card preset" data-type-id="preset-3">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">客户答谢会</h4>
                                <p class="type-description">老客户维护和感谢活动</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">150分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">40-80人</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">20%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-3')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>

                        <div class="type-card preset" data-type-id="preset-4">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-coffee"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">小型茶话会</h4>
                                <p class="type-description">非正式的客户交流聚会</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">90分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">15-30人</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">35%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-4')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 线上活动类型 -->
                <div class="type-category">
                    <h3 class="category-title">
                        <i class="fas fa-laptop"></i>
                        线上活动类型
                    </h3>
                    <div class="type-cards">
                        <div class="type-card preset" data-type-id="preset-5">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-video"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">视频分享会</h4>
                                <p class="type-description">在线视频会议形式</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">60分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">100-200人</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">15%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-5')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>

                        <div class="type-card preset" data-type-id="preset-6">
                            <div class="card-header">
                                <div class="type-icon preset-icon">
                                    <i class="fas fa-broadcast-tower"></i>
                                </div>
                                <div class="type-status">
                                    <span class="status-badge status-active">启用</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="type-name">直播介绍</h4>
                                <p class="type-description">实时直播产品介绍</p>
                                <div class="type-details">
                                    <div class="detail-item">
                                        <span class="detail-label">默认时长</span>
                                        <span class="detail-value">45分钟</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">适合人数</span>
                                        <span class="detail-value">不限</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">转化预期</span>
                                        <span class="detail-value">10%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-outline btn-small" onclick="editActivityType('preset-6')">
                                    <i class="fas fa-edit"></i>
                                    编辑配置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 自定义活动类型 -->
        <section class="custom-types-section">
            <div class="section-header">
                <h2 class="section-title">自定义活动类型</h2>
                <p class="section-subtitle">根据业务需要创建的个性化活动类型</p>
            </div>

            <div class="custom-types-container">
                <div class="custom-types-grid" id="custom-types-grid">
                    <!-- 自定义类型卡片将在这里动态生成 -->
                    <div class="type-card custom" data-type-id="custom-1">
                        <div class="card-header">
                            <div class="type-icon custom-icon">
                                <i class="fas fa-spa"></i>
                            </div>
                            <div class="type-status">
                                <span class="status-badge status-active">启用</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h4 class="type-name">康养主题分享会</h4>
                            <p class="type-description">专注于健康养生的旅游产品分享</p>
                            <div class="type-details">
                                <div class="detail-item">
                                    <span class="detail-label">默认时长</span>
                                    <span class="detail-value">100分钟</span>
                                </div>
                                <div class="detail-item">
                                    <span class="detail-label">适合人数</span>
                                    <span class="detail-value">20-40人</span>
                                </div>
                                <div class="detail-item">
                                    <span class="detail-label">转化预期</span>
                                    <span class="detail-value">40%</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-outline btn-small" onclick="editActivityType('custom-1')">
                                <i class="fas fa-edit"></i>
                                编辑
                            </button>
                            <button class="btn btn-destructive btn-small" onclick="deleteActivityType('custom-1')">
                                <i class="fas fa-trash"></i>
                                删除
                            </button>
                        </div>
                    </div>

                    <!-- 空状态提示 -->
                    <div class="empty-state" id="empty-state" style="display: none;">
                        <div class="empty-icon">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                        <h3>暂无自定义活动类型</h3>
                        <p>点击右上角"新增类型"按钮创建第一个自定义活动类型</p>
                        <button class="btn btn-primary" onclick="openAddTypeModal()">
                            <i class="fas fa-plus"></i>
                            新增类型
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：新增/编辑活动类型 -->
    <div class="modal-overlay" id="activity-type-modal">
        <div class="modal large">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">新增活动类型</h3>
                <button class="modal-close" onclick="closeActivityTypeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="activity-type-form" class="activity-type-form">
                    <div class="form-section">
                        <h4 class="section-title">基础信息</h4>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="type-name">类型名称 <span class="required">*</span></label>
                                <input type="text" class="form-input" id="type-name" placeholder="如：康养主题分享会" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="type-icon">图标选择</label>
                                <div class="icon-selector">
                                    <button type="button" class="icon-btn active" data-icon="fas fa-spa">
                                        <i class="fas fa-spa"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-mountain">
                                        <i class="fas fa-mountain"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-water">
                                        <i class="fas fa-water"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-leaf">
                                        <i class="fas fa-leaf"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-sun">
                                        <i class="fas fa-sun"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-camera">
                                        <i class="fas fa-camera"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-utensils">
                                        <i class="fas fa-utensils"></i>
                                    </button>
                                    <button type="button" class="icon-btn" data-icon="fas fa-music">
                                        <i class="fas fa-music"></i>
                                    </button>
                                </div>
                                <input type="hidden" id="selected-icon" value="fas fa-spa">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="type-description">类型描述</label>
                            <textarea class="form-textarea" id="type-description" placeholder="详细描述这种活动类型的特点和用途" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="form-section">
                        <h4 class="section-title">活动配置</h4>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="default-duration">默认时长（分钟）</label>
                                <input type="number" class="form-input" id="default-duration" placeholder="90" min="15" max="480">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="participant-range">适合人数范围</label>
                                <div class="range-inputs">
                                    <input type="number" class="form-input range-input" id="min-participants" placeholder="最少" min="1">
                                    <span class="range-separator">-</span>
                                    <input type="number" class="form-input range-input" id="max-participants" placeholder="最多" min="1">
                                    <span class="range-unit">人</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="venue-requirements">场地要求</label>
                                <input type="text" class="form-input" id="venue-requirements" placeholder="如：需要投影设备、音响设备">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="expected-conversion">转化预期（%）</label>
                                <input type="number" class="form-input" id="expected-conversion" placeholder="25" min="0" max="100" step="0.1">
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h4 class="section-title">成本预算</h4>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="estimated-cost">预估活动成本（元）</label>
                                <input type="number" class="form-input" id="estimated-cost" placeholder="5000" min="0" step="100">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="cost-per-person">人均成本（元）</label>
                                <input type="number" class="form-input" id="cost-per-person" placeholder="150" min="0" step="10" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeActivityTypeModal()">取消</button>
                <button class="btn btn-primary" onclick="saveActivityType()">保存</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/activity-type-management.js"></script>
</body>
</html>